import styled from '@emotion/styled';
import React, { useEffect, useRef } from 'react';
import videojs, { VideoJsPlayer } from 'video.js';
import './styles/index.less';

interface VideoPreviewUrlProps {
	url: string;
	width?: number;
	height?: number;
	autoPlay?: boolean;
	options?: any;
}

const VideoContainer = styled.div`
	width: 100%;
	height: 100%;
	margin: 20px 0;
	background-color: #000;
`;

const VideoPreviewUrl = (props: VideoPreviewUrlProps) => {
	const { url = '', width = '100%', height = '100%', autoPlay = true } = props;

	return (
		<VideoContainer id="video-preview-url">
			<video id="prew-video-url-container" width={width} height={height} autoPlay={autoPlay} muted preload={'auto'} controls src={url}></video>
		</VideoContainer>
	);
};

export default VideoPreviewUrl;
